<template>
    <div class="ui special cards">
        <div class="card">
            <p style="color:gray;margin:0.4vw 0 0.3vw 0 ;font-size:1vw">时间</p>
            <transition name="fade">
                <span class="clock">
                    <div style="display: inline-block;">
                        <div class="time_panel">
                            <p style="">{{hour}} </p>
                        </div>
                        <p style="float: left;font-size:2.6vw; margin:0px;padding: 0">:</p>
                        <div class="time_panel">
                            <p style="">{{minute}}</p>
                        </div>
                        <p style="float: left;font-size:2.6vw;margin:0px;padding: 0">:</p>
                        <div class="time_panel">
                            <p style="">{{second}} </p>
                        </div>
                    </div>
                </span>
            </transition>


            <div class="extra content">
                <!--      日期          -->
                <span class="right floated" style="font-size: 0.8vw">
                 {{day}}  /  {{ month}} /  {{year}}  {{week}}
                </span>

                <!--      开关          -->
                <span class="left floated" style="margin-top:0.2vw">
                    <div class="inline field">
                        <div class="ui slider checkbox " @click="ddd()">
                          <input type="checkbox"  checked="checked" tabindex="0" class="hidden">
                          <label></label>
                        </div>
                        <label></label>
                    </div>
                </span>

            </div>
            <div class="bar" style="width: 100%;">
                <div id="bar_line" style="">{{progressBar}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TimeShow",
        data() {
            return {
                year: '11',
                month: '',
                day: '',
                week: '',
                hour: '',
                minute: '',
                second: '',
                nowDate: '',
                process: 0,
                wid: 0,
            }
        },
        created() {
            this.getYear();
        },
        computed: {
            progressBar: function () {
                $('#bar_line').animate({width: this.second * 100 / 60 + '%'});
                return '';
            }
        },
        mounted() {
            this.currentTime();
        },
        methods: {
            ddd() {
                $(function () {
                    $('.clock').toggle('normal')
                })

            },

            getYear() {
                let month = new Array(12);
                month[0] = "January";
                month[1] = "February";
                month[2] = "March";
                month[3] = "April";
                month[4] = "May";
                month[5] = "June";
                month[6] = "July";
                month[7] = "August";
                month[8] = "September";
                month[9] = "October";
                month[10] = "November";
                month[11] = "December";

                let date = new Date();
                this.year = date.getFullYear(); // 年
                this.month = month[date.getMonth() + 1]; // 月
                this.second = date.getSeconds();
            },
            currentTime() {
                setInterval(this.formatDate, 1000);
            },
            formatDate() {
                let date = new Date();

                let hour = date.getHours(); // 时
                let minute = date.getMinutes(); // 分
                let second = date.getSeconds(); // 秒

                this.day = date.getDate(); // 日
                let week = date.getDay(); // 星期
                let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                this.week = weekArr[week];

                this.hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
                this.minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
                this.second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            }
        },

        beforeDestroy() {
            if (this.formatDate) {
                clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
            }
        }
    }


    $(function () {
        $('.ui.checkbox').checkbox();
    })

</script>

<style scoped>
    .card {
        box-shadow: 2px 3px 6px #bababc !important;
    }

    #bar_line {
        background: white;
        height: 3px;
        width: 1%;
        border-bottom-left-radius: inherit
    }

    .bar {
        animation: changeColor 60s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes changeColor {
        0% {
            background-color: #ff695e;
        }
        20% {
            background-color: #ffe21f;
        }
        40% {
            background-color: #2ecc40;
        }
        60% {
            background-color: #54c8ff;
        }
        80% {
            background-color: #a291fb;
        }
        100% {
            background-color: #ff8edf;
        }
    }

    .clock {
        /*display: none;*/
    }

    .time_panel {
        /*border: 1px solid #6dffff;*/
        float: left;
        color: white;
        font-size: 3vw;
        width: 3.7vw;
        height: 4.2vw;
        background: #888888;
        border-radius: 0.3vw;
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }


</style>
